import React, { useState, useEffect } from 'react'

// 依赖项的三种写法
// useEffect(() => {}) 不写依赖项，初始化和任何状态变化的时候会执行副作用函数（Effect function），相当于 class 中的 componentDidMount + componentDidUpdate
// useEffect(() => {}, [count]) 依赖项里面写了 count，初始化和 count 状态变化的时候会执行副作用函数（Effect function）
// useEffect(() => {}, []) 依赖项里面写了空数组，只有初始化的执行会执行副作用函数（Effect function），相当于 class 中的 componentDidMount

export default function App() {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setCount(count + 1)
  }
  useEffect(() => {
    // 如果依赖项是空数组，只会在初始化完毕后执行一次
    // 绑定事件、发请求
    console.log(1)
  }, [])
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>+1</button>
    </div>
  )
}
